<head>
    <title>Time Zone</title>
    <meta charset="utf-8">
    <link href="./patternfly.css" type="text/css" rel="stylesheet">
    <script src="../base1/cockpit.js"></script>
</head>
<body>
    <div class="pf-c-page">
        <main class="pf-c-page__main" tabindex="-1">
            <section class="pf-c-page__main-section pf-m-light">
                <div class="pf-l-stack pf-m-gutter">
                    <div class="pf-l-stack__item">
                        <label for="current">Time Zone</label>
                        <span id="current"></span>
                    </div>

                    <div class="pf-l-stack__item">
                        <label class="control-label" for="new">New Zone</label>
                        <input class="form-control" id="new" value="UTC">
                    </div>

                    <div class="pf-l-stack__item">
                        <button class="pf-c-button pf-m-primary" id="change">Change</button>
                        <span id="failure"></span>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script>
        const input = document.getElementById("new");
        const current = document.getElementById("current");
        const failure = document.getElementById("failure");

        document.getElementById("change").addEventListener("click", change_zone);

        const service = cockpit.dbus('org.freedesktop.timedate1');
        const timedate = service.proxy();
        timedate.addEventListener("changed", display_zone);

        function display_zone() {
            current.innerHTML = timedate.Timezone;
        }

        function change_zone() {
            timedate.SetTimezone(input.value, true)
                    .catch(change_fail);
            failure.innerHTML = "";
        }

        function change_fail(err) {
            failure.innerHTML = err.message;
        }

    </script>
</body>
</html>

